<template>
  <div class="echart-yAxis">
    <FormItem
      :form="form"
      :option="fixPath('echart.yAxis.[x].show')"
      :label="$demoi18n('echart.label.yAxisDisplay')"
      type="switch"
    />
    <FormItem
      :form="form"
      :option="fixPath('echart.yAxis.[x].name')"
      :label="$demoi18n('echart.label.yAxisName')"
      type="input"
    />
    <FormItem
      :form="form"
      :helptip="barHelptip"
      :option="fixPath('echart.yAxis.[x].type')"
      :label="$demoi18n('echart.label.yAxisType')"
      type="select"
      :options="axisTypes"
    />
    <FormItem
      :form="form"
      :option="fixPath('echart.yAxis.[x].position')"
      :label="$demoi18n('echart.label.yAxisPosition')"
      type="select"
      :options="yAxisPositions"
    />
    <FormItem
      :form="form"
      :option="fixPath('echart.yAxis.[x].inverse')"
      :label="$demoi18n('echart.label.reverseAxis')"
      type="switch"
    />
    <FormItem
      :helptip="$demoi18n('echart.minValue.tip')"
      :form="form"
      :option="fixPath('echart.yAxis.[x].min')"
      :label="$demoi18n('echart.label.startValue')"
      type="input"
      show-switch
    />
    <FormItem
      :helptip="$demoi18n('echart.maxValue.tip')"
      :form="form"
      :option="fixPath('echart.yAxis.[x].max')"
      :label="$demoi18n('echart.label.endValue')"
      type="input"
      show-switch
    />
    <EchartPropertyPopup
      v-if="hasProp('yAxis-name')"
      :form="form"
      component="yAxis/yAxis-name"
      :title="$demoi18n('echart.setting.yAxisName')"
      :index="index"
    />
    <EchartPropertyPopup
      v-if="hasProp('yAxis-axisLabel')"
      :form="form"
      component="yAxis/yAxis-axisLabel"
      :title="$demoi18n('echart.setting.yAxisScaleLabel')"
      :index="index"
    />
    <EchartPropertyPopup
      v-if="hasProp('yAxis-axisTick')"
      :form="form"
      component="yAxis/yAxis-axisTick"
      :title="$demoi18n('echart.setting.yAxisScale')"
      :index="index"
    />
    <EchartPropertyPopup
      v-if="hasProp('yAxis-axisLine')"
      :form="form"
      component="yAxis/yAxis-axisLine"
      :title="$demoi18n('echart.setting.yAxisAxis')"
      :index="index"
    />
  </div>
</template>
<script>
import FormItem from '@/components/common/echart/form-item.vue';
import EchartPropertyPopup from '@/components/common/echart/echart-property-popup.vue';
import EchartCommonMixin from '@/components/common/echart/mixins/echart-common-mixin.js';
import { yAxisTypes, yAxisPositions } from '@/components/common/echart/form-item-options.js';
export default {
  components: { FormItem, EchartPropertyPopup },
  mixins: [EchartCommonMixin],
  props: {
    form: Object,
  },
  data() {
    return {
      yAxisPositions,
    };
  },
  computed: {
    axisTypes() {
      let arr = yAxisTypes;
      const compName = this.form.echart._componentName;
      if (compName === 'gantt-chart' || compName === 'table-gantt-combine') {
        arr = yAxisTypes.filter(n => n.value === 'category');
      } else if (compName === 'ladder-waterfall' || compName === 'k-line') {
        arr = yAxisTypes.filter(n => n.value === 'value');
      } else if (compName === 'scatter') {
        arr = yAxisTypes.filter(n => n.value !== 'time');
      } else if (compName === 'uniaxial-bar') {
        // 柱形图可以横着放，不限制轴类型
      } else {
        // y轴只能是数值轴
        arr = yAxisTypes.filter(n => n.value === 'value');
      }
      return arr;
    },
    barHelptip() {
      let tip = '';
      if (this.form.echart._componentName === 'uniaxial-bar') {
        tip = this.$demoi18n('uniaxial-bar.xyType.helptip');
      }
      return tip;
    },
  },
  watch: {},
  methods: {},
};
</script>
<style lang="less" scoped></style>
